[Colors] Central dynamic color map for every component #261

lubber-de · 2018-11-26T21:22:33Z

Description

This PR provides the base to create a central dynamic color palette in a single mixin-map instead of hardcoding every possible color in each component.
To stay backward compatible, this map currently holds the already existing global color variables.

Now it's possible to define only the colors and naming you want and each component will generate the appropriate component with the colors and those namings which are defined in the central map.

This way it's now easy to define completely new color-names without touching any component manually.

Example

If somebody does not like the basic FUI color palette but want to use only brand color namings instead, the colors.less needs to be created in the appropriate {site} folder of the theme folder having this example content:

// those variables should be defined in your site.variables  
@pinkie       : #ED458B;
@lightPinkie  : #f9b8d2;
@pinkieText   : #EB81B4;
@twilight     : #8689c8;
@lightTwilight: #d19fe3;
@twilightText : #662d8a;

@colors: {
  @pinkiepie: {
    color          : @pinkie;
    light          : @lightPinkie;
    border         : #BE1D77; 
    background     : @lightPinkie;
    header         : @pinkie;
    boxShadow      : none;
    boxFloatShadow : none;
    text           : @pinkieText;   
    lightText      : @pinkieText;   
    hoverText      : @pinkieText;                              
    focus          : @pinkieText; 
    lightFocus     : @pinkieText; 
    down           : @pinkieText; 
    lightDown      : @pinkieText; 
    active         : @pinkieText; 
    lightActive     : @pinkieText; 
    shadow         : @pinkieText; 
    lightShadow     : @pinkieText; 
    hover          : saturate(darken(@pinkie, 5), 10, relative);
    lightHover     : saturate(darken(@lightPinkie, 5), 10, relative);
    ribbon         : darken(@pinkie,10);
    invertedRibbon : darken(@lightPinkie,10);
    isDark         : false;
    isVeryDark     : false;
  };
  @twilight: {
    color          : @twilight;
    light          : @lightTwilight;
    border         : #263773; 
    background     : @lightTwilight;
    header         : @twilight;
    boxShadow      : none;
    boxFloatShadow : none;
    text           : @twilightText;
    lightText      : @twilightText;
    hoverText      : @twilightText;
    focus          : @twilightText; 
    lightFocus     : @twilightText; 
    down           : @twilightText; 
    lightDown      : @twilightText; 
    active         : @twilightText; 
    lightActive     : @twilightText; 
    shadow         : @twilightText; 
    lightShadow     : @twilightText; 
    hover          : saturate(darken(@twilight, 5), 10, relative);
    lightHover     : saturate(darken(@lightTwilight, 5), 10, relative);
    ribbon         : darken(@twilight,10);
    invertedRibbon : darken(@lightTwilight,10);
    isDark         : true;
    isVeryDark     : false;
  };
}

Now only those color names pinkiepie and twilight are available and compiled into the whole framework instead of the FUI default ones. You would be able to use everything like ui pinkiepie button ui twilight segment and so on...

Using this feature requires LESS >= v3.7

Element	Status	Special
segment	✔️	`!important` replaced by proper specificity 🙂
label	✔️
slider	✔️
progress	✔️
header	✔️	`!important` replaced by proper specificity 🙂
toast	✔️
button	✔️	`!important` replaced by proper specificity 🙂
message	✔️
card	✔️
statistic	✔️
icon	✔️	`!important` removed (was not needed)
table	✔️	`!important` removed (was not needed), added cell color support
grid	✔️	`!important` removed (was not needed)
menu	✔️	`!important` removed (was not needed)
loader	✔️
text	✔️	New component #289, see below
rating	✔️

Github Tasklist Overview

To be able to see open tasks counter in the Issues Overview

Screenshots

New Text component limited to `span` tags as discussed in #289

Tomatoes are <span class="ui red">red</span>

Table Cell color support

<td class="orange">September 14, 2013 (disabled)</td>
<td class="purple disabled">September 14, 2013 (disabled)</td>

Relates to

Semantic-Org/Semantic-UI#6673
Semantic-Org/Semantic-UI#6661
Semantic-Org/Semantic-UI#6193
Semantic-Org/Semantic-UI#2279
Semantic-Org/Semantic-UI#4650

…ough and color palette naming is dynamic

…ortant

y0hami · 2018-11-27T08:23:01Z

I think this is an excellent start and I think you should start moving the other components into this format.

Great work @lubber-de 👍

lubber-de · 2018-11-27T08:26:35Z

@hammy2899 Thanks 🙂
Would be great, if we could merge the label PR first, so I don't need to touch the current huge label code unnecessarily 😉

…ables

…tant

prudho

I agree with @hammy2899, this is a great addition !

… and fixes

…important

… and tertiary accordingly

…hadow entries fixed.

lubber-de · 2018-12-21T07:54:16Z

This PR is ready for review now 😊

y0hami

LGTM

ColinFrick

LGTM

lubber-de · 2022-10-01T00:44:02Z

Docs added by fomantic/Fomantic-UI-Docs#377

lubber-de added 2 commits November 26, 2018 20:43

feat(colors): Central base mapping, so each component can iterate thr…

8f52ac0

…ough and color palette naming is dynamic

feat(colors,segment): segment dynamic color creation and removed !imp…

6f4d1bd

…ortant

lubber-de requested review from ColinFrick, y0hami and prudho November 26, 2018 21:22

lubber-de self-assigned this Nov 26, 2018

lubber-de added type/feat Any feature requests or improvements lang/css Anything involving CSS state/awaiting-reviews Pull requests which are waiting for reviews labels Nov 26, 2018

lubber-de changed the title ~~[Colors] Dynamic color maps for every component~~ [Colors] Central dynamic color map for every component Nov 26, 2018

y0hami added this to the 2.7.x milestone Nov 27, 2018

lubber-de added 6 commits November 27, 2018 11:36

Merge branch 'develop' into dynamic_color_maps

fecb9ee

feat(colors,label): label dynamic color creation and centralized vari…

1c56055

…ables

feat(colors,range): range dynamic color creation

8b80a4f

feat(colors,progress): progress dynamic color creation

05e394d

feat(colors,header): header dynamic color creation and removed !impor…

83c8f46

…tant

feat(colors,toast): toast dynamic color creation

511909c

prudho previously approved these changes Nov 28, 2018

View reviewed changes

lubber-de added 10 commits November 29, 2018 13:20

feat(colors,icon): icon dynamic color creation and removed !important…

3e3d8da

… and fixes

fix(header): removed 0 metrics

4bfa491

fix(label): removed 0 metrics

48557be

fix(progress): removed 0 metrics

d40e554

fix(segment): removed 0 metrics

490cb9b

feat(colors,card): card dynamic color creation and removed 0 metrics

5557a16

fix(header): removed 0 metrics

3ad66d2

fix(progress): removed 0 metrics

aab87b6

fix(label): removed 0 metrics

eb55fc2

fix(segment): removed 0 metrics

f7150be

lubber-de added 2 commits December 20, 2018 13:29

Merge branch 'develop' into dynamic_color_maps

9c37f54

feat(colors,loader): loader dynamic color creation

477c9e3

lubber-de added the state/awaiting-docs Pull requests which need doc changes/additions label Dec 20, 2018

lubber-de added 5 commits December 20, 2018 15:27

feat(colors,menu): menu dynamic color creation and removed unneeded !…

6477270

…important

feat(colors,button): removed color related !important and fixed basic…

7608ffd

… and tertiary accordingly

feat(colors,button): button dynamic color creation and multiple box-s…

e5aa982

…hadow entries fixed.

feat(colors,message): message dynamic color creation

d704d3f

feat(colors,text): new text element fomantic#289

ba45329

lubber-de added tag/new-component New UI components and removed state/on-hold Issues and pull requests which are on hold for any reason labels Dec 21, 2018

This was referenced Dec 21, 2018

The future of Fomantic as v3.0 #319

Closed

[Table] Cell colors support Example fomantic/Fomantic-UI-Docs#62

Merged

[Text] Docs for new text element fomantic/Fomantic-UI-Docs#63

Merged

y0hami approved these changes Dec 21, 2018

View reviewed changes

ColinFrick approved these changes Dec 21, 2018

View reviewed changes

y0hami merged commit 6e4994d into fomantic:develop Dec 21, 2018

y0hami added state/has-docs A issue/PR which requires documentation changes and has the corresponding PR open in the docs repo and removed state/awaiting-reviews Pull requests which are waiting for reviews state/awaiting-docs Pull requests which need doc changes/additions labels Dec 21, 2018

lubber-de deleted the dynamic_color_maps branch December 21, 2018 16:13

This was referenced Dec 21, 2018

2.7 Release #320

Merged

2.7 Release fomantic/Fomantic-UI-CSS#6

Merged

YamiOdymel mentioned this pull request Dec 22, 2018

重整 Tocas 的 Color 顏色系統 teacat/tocas#720

Closed

This was referenced Dec 23, 2018

[Dropdown, Input, Loader] Elastic Animation Style had wrong color #324

Closed

[Dropdown, Input, Loader] Elastic Animation Style had wrong color #325

Merged

lubber-de modified the milestones: 2.7.x, 2.7.0 Dec 28, 2018

lubber-de mentioned this pull request Dec 30, 2018

[Label] Remove hardcoded color exception "not()" for menu item labels #331

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Colors] Central dynamic color map for every component #261

[Colors] Central dynamic color map for every component #261

lubber-de commented Nov 26, 2018 •

edited

Loading

y0hami commented Nov 27, 2018

lubber-de commented Nov 27, 2018

prudho left a comment

lubber-de commented Dec 21, 2018

y0hami left a comment

ColinFrick left a comment

lubber-de commented Oct 1, 2022

[Colors] Central dynamic color map for every component #261

[Colors] Central dynamic color map for every component #261

Conversation

lubber-de commented Nov 26, 2018 • edited Loading

Description

Example

Github Tasklist Overview

Screenshots

New Text component limited to span tags as discussed in #289

Table Cell color support

Relates to

y0hami commented Nov 27, 2018

lubber-de commented Nov 27, 2018

prudho left a comment

Choose a reason for hiding this comment

lubber-de commented Dec 21, 2018

y0hami left a comment

Choose a reason for hiding this comment

ColinFrick left a comment

Choose a reason for hiding this comment

lubber-de commented Oct 1, 2022

lubber-de commented Nov 26, 2018 •

edited

Loading

New Text component limited to `span` tags as discussed in #289